<template>
<div class="main">

  <div>{{all_myrest_QueryKnowledgeDetail==null?'':''}}</div>
  <div>{{all_myrest_SubmitKnowledgeTestAnswer==null?'':''}}</div>
  <iframe id="cntiframe" v-bind:src="iframeUrl" name="cntiframe" frameborder="0" v-bind:scrolling="yesorno" v-bind:height="urlHeight" style="width:1px !important;min-width:100%;">
  </iframe>
  <div class="test">
      <h1>随堂测试</h1>
      <div class="quiz">
          <dl v-for="item in CntQuestionList" v-bind:class="item.type==1?'dradio':'dcheckbox'" v-bind:id="'tid_'+item.id">
              <dt>{{item.title}}</dt>
              <dd v-for="opt in item.optionList" v-on:click="xuanzhong($event)" v-bind:class="{checked:(opt.userChecked==true || opt.right==true)?true:false ,true:opt.right==true?true:false,false:opt.right==false?true:false}"   v-bind:id="'opt_'+opt.id">{{opt.content}}</dd>
          </dl>

      </div>
      <div class="btn_wrap">
          <div class="btn_submit" v-on:click="sub()" >{{subtext}}</div>
      </div>
  </div>

</div>

</template>

<script>
  import stores from './mystore.js'
  import Vue from 'vue';
  import { XButton, XInput,Group, Tab, TabItem } from 'vux'
  import { mapGetters,mapActions } from 'vuex'
  import sha1 from 'js-sha1'

  export default {
    data(){
      return {
          urlHeight:'',
          yesorno:'no',
          ttst:{},
          subkk:true,
          subtext:'提交',
          hasStudy:'',
          groupid:'',
          payObj:{},
          iframeUrl:'',
          knowledgeContentId:'',
          knowledgeList:[],
          CntQuestionList:[],
          successMsg:"",
          items:[1,2,3,4,5],
          mypayload:{
              url:'baseapi',
              actionName:"QueryKnowledgeGroup",
              postData: {
                  "knowledgeGroupId":"",
              }
          },
          knowledgeCntpayload:{
              url:'baseapi',
              actionName:"QueryKnowledgeDetail",
              postData: {
                  "contentId":"",
              }
          },
          subpayload:{
              url:'baseapi',
              actionName:"SubmitKnowledgeTestAnswer",
              postData:{
                  "answer":{},
                  "contentId":1,
                  "groupId":4
              }
          },
      }
    },
    watch:{
        hasStudy(curVal,oldVal){
          //console.log("curVal:"+curVal+" oldVal:"+oldVal)
          if(this.hasStudy){
            this.subtext='已答过';
            this.subkk=false;
            console.info("subpayload::fgf:fdgfd:::::"+Object.keys(this.subpayload.postData.answer).length)
          }else{
            this.subtext='提交';
          }
          //$(".cartList").css("height",this.cartListlength*87+40+"px")
        },


    },
    computed:{
//        all_myrest(){
//            return this.$store.getters.all_restful
//        },
//        all_myrest_QueryKnowledgeGroup(){
//            var dataval=this.$store.getters.all_restful_QueryKnowledgeGroup;
//            if(dataval){
//                this.knowledgeList=dataval.body.knowledgeGroupList[0].knowledgeList;
//                console.log("hahahhahahahahaah++++++++++++++:"+this.knowledgeList)
//                return dataval.body.knowledgeGroupList
//            }else{
//                return null
//            }
//            //return dataval;all_restful_QueryKnowledgeDetail
//        },
        all_myrest_QueryKnowledgeDetail(){
            var dataval=this.$store.getters.all_restful_QueryKnowledgeDetail;
            if(dataval){
                var that=this;
                //var payObj={};
                for(var i=0;i<dataval.body.questionList.length;i++){
                    this.payObj[dataval.body.questionList[i].id]=[];
                }
                for(var n in this.payObj){
                    console.info(n+":"+this.payObj[n].join(','));
                }
                this.hasStudy=dataval.body.hasStudy;
                this.CntQuestionList=dataval.body.questionList;
//                window.onmessage=function(event){
//                  that.urlHeight=event.data
//                 // $("#cntiframe").height(event.data)
//                  //$(".hahah").text(event.data)
//                  console.info("gaodu:::"+event.data)
//                  this.urlHeight=event.data
//                }
                //$("#cntiframe").height($(window).height()-60)
                return dataval.body
            }else{
                return null
            }
            //return dataval;all_restful_QueryKnowledgeDetail
        },

        all_myrest_SubmitKnowledgeTestAnswer(){
            var dataval=this.$store.getters.all_restful_SubmitKnowledgeTestAnswer;
            if(dataval){
                //this.subtext='已答过';
                this.$store.commit('restful_api',this.knowledgeCntpayload)
                return dataval
            }else{
                return null
            }
            //return dataval;all_restful_QueryKnowledgeDetail
        },

//        all_nots(){
//            return this.$store.getters.all_nots
//        },
//        all_login(){
//            return this.$store.getters.all_login
//        },
//        ...mapGetters([ 'evenOrOdd'
//        ])
    },
    created (){
        var that=this
      window.onmessage=function(event){
        that.urlHeight=event.data
        console.info("gaodu::::::::::::")
      }

      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

      if(isiOS){
          console.info("isiOS:"+isiOS)
          this.yesorno='no'
      }else{
          console.info("android:"+isAndroid)
          this.yesorno='yes'
      }
      this.cntReady();
    },

    methods:{
      dosth (){
        //this.$store.commit('restful_api',this.mypayloadvideo)
      },
      xuanzhong:function(e){
          if(this.hasStudy){return}

        var obj=e.currentTarget;
        if($(obj).parent().hasClass("dradio")){
          $(obj).addClass("checked").siblings().removeClass("checked")
        }else{
          $(obj).addClass("checked")
        }
      },
      cntReady(){
        var listiid=this.$route.params.listiid;
        this.groupid=this.subpayload.postData.groupId=this.$route.params.groupid;
        var ifmurl="http://appjk.lep365.com/content/knowlege/"+listiid;
        this.knowledgeContentId=this.subpayload.postData.contentId=this.knowledgeCntpayload.postData.contentId=listiid;
        this.iframeUrl=ifmurl;
        this.$store.commit('restful_api',this.knowledgeCntpayload);
        //alert(2)
      },
      sub(){
          var tarr=[];
          var tlength=$(".quiz").children().length;
          for(var t=0;t<tlength;t++){
              var tid_split_arr=$(".quiz").children().eq(t).attr("id").split("_")
              var opt_id_split_arr=$(".quiz").children().eq(t).find(".checked").attr("id").split("_")
              for(var n in this.payObj){
                  if(n==tid_split_arr[1]){
                      this.payObj[n].push(opt_id_split_arr[1])
                      console.log(this.payObj[n])
                  }

              }
          }
          this.subpayload.postData.answer=this.payObj;
          if(this.subkk && Object.keys(this.subpayload.postData.answer).length>0){
              this.$store.commit('restful_api',this.subpayload);
              this.subkk=false;
          }



      },

      ...mapActions([
        'increment',
        'decrement',
        'incrementIfOdd'
      ]),
    },
    components: { XButton, Group, XInput, Tab, TabItem }

  }

</script>

<style scoped>
  html,body{ width: 100%;}
  *{ margin: 0; padding: 0; font-size: 14px;}
  body{ background-color: #fff;}
  a{ text-decoration: none; color: #000;}
  .clear:after{ display: block; clear: both; content: ''; height: 0;}
  div img{ width: 100%; display: block;}

  .knowledge{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px 15px;background:#fff;}
  .knowledge h1{font-size:18px;color:#3d3836;padding:0 0 5px 0; font-weight:bold;}
  .knowledge .author{ margin-bottom:10px; font-size:12px; color:#aaa;}
  .knowledge p{font-size:14px;color:#666;}
  .knowledge .from{text-align:right;font-size:12px;color:#aaa;padding-top:3px;}
  .test{width:100%;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 10px;}
  .test h1{font-size:16px;color:#000;padding:16px 0 8px 0;}
  .test h1:before{display:block;float:left;width:18px;height:18px;content:'';background:url(../assets/images/icon_test.png) no-repeat;background-size:contain;margin:3px 5px 0 5px;}
  .quiz dl{border:1px solid #ddd;border-radius:6px;margin-bottom:5px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px;background:#ffffff;}
  .quiz dl dt{font-size:14px;color:#333;padding-bottom:6px;}
  .quiz dl dd{font-size:16px;color:#666;padding:2px 0;}
  .quiz dl dd:before{display:block;float:left;width:20px;height:20px;content:'';background:url(../assets/images/icon_check.png) no-repeat 0 0;background-size:contain;margin:1px 15px 0 0;}
  .quiz dl dd.checked:before{display:block;float:left;width:20px;height:20px;content:'';background:url(../assets/images/icon_checked.png) no-repeat 0 0;background-size:contain;}

  .quiz dl dd.checked.true:before{display:block;float:left;width:20px;height:20px;content:'';background:url(../assets/images/icon_checked_true.png) no-repeat 0 0;background-size:contain;}

  .quiz dl dd.checked.false:before{display:block;float:left;width:20px;height:20px;content:'';
    background:url(../assets/images/icon_checked_false.png) no-repeat 0 0;background-size:contain;}

  .btn_wrap{width:100%;padding:30px 10px 50px 10px;box-sizing:border-box;-webkit-box-sizing:border-box;}
  .btn_submit{width:100%;height:40px;background:#2977f4;font-size:18px;color:#fff;text-align:center;line-height:40px;border-radius:6px;}
  .btn_submitDis{width:100%;height:40px;background:#aaa;font-size:18px;color:#fff;text-align:center;line-height:40px;border-radius:6px;}

  .textMargin{ margin-top:20px;}
  .cntimg img{ width:100%;}

  /*通用div下img图片的100%显示*/
  .divimg{ width:100%;}
  .divimg img{ width:100%;}

  /*交易所模块*/
  .jys_wrap{ margin-bottom:10px;}
  /*iframe模块*/
  iframe{ width:100%;}
  iframe header h1{ font-size:18px;color:#3d3836;padding:0 0 5px 0; font-weight:bold;}

  .quiz dl dd.rightmark:before{display:block;float:left;width:20px;height:20px;content:'';background:url(../assets/images/icon_checked_true.png) no-repeat 0 0;background-size:contain;}

  .quiz dl dd.falsemark:before{display:block;float:left;width:20px;height:20px;content:'';background:url(../assets/images/icon_checked_false.png) no-repeat 0 0;background-size:contain;}




</style>






